<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>智能服务</title>
    <!--ios7-->
    <link rel="stylesheet" type="text/css" href="../static/js/ios-switch/switchery.css" />
  <!--icheck-->
    <link href="../static/js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/minimal/red.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/minimal/green.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/minimal/blue.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/minimal/yellow.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/minimal/purple.css" rel="stylesheet">

    <link href="../static/js/iCheck/skins/square/square.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/square/red.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/square/green.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/square/blue.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/square/yellow.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/square/purple.css" rel="stylesheet">

    <link href="../static/js/iCheck/skins/flat/grey.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/flat/red.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/flat/green.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/flat/blue.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/flat/yellow.css" rel="stylesheet">
    <link href="../static/js/iCheck/skins/flat/purple.css" rel="stylesheet">

    <!--multi-select-->
    <link rel="stylesheet" type="text/css" href="../static/js/jquery-multi-select/css/multi-select.css" />

    <!--file upload-->
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap-fileupload.min.css" />

    <!--tags input-->
    <link rel="stylesheet" type="text/css" href="../static/js/jquery-tags-input/jquery.tagsinput.css" />

  <!--common-->
  <link href="../static/css/style.css" rel="stylesheet">
  <link href="../static/css/style-responsive.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="../static/js/html5shiv.js"></script>
  <script src="../static/js/respond.min.js"></script>
  <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
            <a href="index.html"><img src="../static/images/logo.png" alt=""></a>
        </div>

        <div class="logo-icon text-center">
            <a href="index.html"><img src="../static/images/logo_icon.png" alt=""></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner">

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="active"><a href="index.html"><i class="fa fa-home"></i> <span>智能服务</span></a></li>
                <li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>视觉智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="blank_page.html">图像识别</a></li>
                        <li><a href="boxed_view.html">图像搜索</a></li>
                        <li><a href="leftmenu_collapsed_view.html"> 图像鉴定</a></li>
                        <li><a href="horizontal_menu.html">视频追踪</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>语音智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="general.html"> 语音识别</a></li>
                        <li><a href="buttons.html"> 语音生成</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>自然语言智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="general.html"> OCR</a></li>
                        <li><a href="buttons.html"> 文字生成</a></li>
                        <li><a href="tabs-accordions.html"> 机器翻译</a></li>
                        <li><a href="typography.html">智能聊天</a></li>
                    </ul>
                </li>
            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->
            <form class="searchform" action="index.html" method="post">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
            </form>
            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-tasks"></i>
                            <span class="badge">8</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 8 pending task</h5>
                            <ul class="dropdown-list user-list">
                                <li class="new">
                                    <a href="#">
                                        <div class="task-info">
                                            <div>Database update</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                                                <span class="">40%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="#">
                                        <div class="task-info">
                                            <div>Dashboard done</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
                                                <span class="">90%</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>Web Development</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 66%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" role="progressbar" class="progress-bar progress-bar-info">
                                                <span class="">66% </span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>Mobile App</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" class="progress-bar progress-bar-danger">
                                                <span class="">33% </span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="task-info">
                                            <div>Issues fixed</div>
                                        </div>
                                        <div class="progress progress-striped">
                                            <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar">
                                                <span class="">80% </span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="new"><a href="">See All Pending Task</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="../static/images/photos/user1.png" alt="" /></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="../static/images/photos/user2.png" alt="" /></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="../static/images/photos/user3.png" alt="" /></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="../static/images/photos/user4.png" alt="" /></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="../static/images/photos/user5.png" alt="" /></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge">4</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">Notifications</h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                        <span class="name">Server #1 overloaded.  </span>
                                        <em class="small">34 mins</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                        <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                        <span class="name">Server #3 overloaded.  </span>
                                        <em class="small">1 hrs</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                        <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                        <span class="name">Server #5 overloaded.  </span>
                                        <em class="small">4 hrs</em>
                                    </a>
                                </li>
                                <li class="new">
                                    <a href="">
                                        <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                        <span class="name">Server #31 overloaded.  </span>
                                        <em class="small">4 hrs</em>
                                    </a>
                                </li>
                                <li class="new"><a href="">See All Notifications</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="../static/images/photos/user-avatar.png" alt="" />
                            {{request.session.realname}}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                智能服务
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">智能服务</a>
                </li>
                <li class="active"> 视觉智能服务 </li>
            </ul>
            <div class="state-info">
                <section class="panel">
                    <div class="panel-body">
                        <div class="summary">
                            <span>今日访问量</span>
                            <h3 class="red-txt">45,600</h3>
                        </div>
                        <div id="income" class="chart-bar"></div>
                    </div>
                </section>
                <section class="panel">
                    <div class="panel-body">
                        <div class="summary">
                            <span>总访问量</span>
                            <h3 class="green-txt">45,600</h3>
                        </div>
                        <div id="expense" class="chart-bar"></div>
                    </div>
                </section>
            </div>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-lg-7">
                <section class="panel">
                    <header class="panel-heading">
                        图像识别
                        <span class="tools pull-right">
                            <a class="fa fa-chevron-down" href="javascript:;"></a>
                            <a class="fa fa-times" href="javascript:;"></a>
                         </span>
                    </header>
                    <div class="panel-body">
                        <div class="row">

                            <div class="col-md-8">
                                <form class="form-horizontal bucket-form">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">识别类型</label>

                                        <div class="col-sm-9 icheck ">

                                            <div class="flat-grey ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="1">
                                                    <label>动物识别 </label>
                                                </div>
                                            </div>
                                            <div class="flat-red ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="2">
                                                    <label>植物识别 </label>
                                                </div>
                                            </div>

                                            <div class="flat-green ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="3">
                                                    <label>果蔬识别</label>
                                                </div>
                                            </div>
                                            <div class="single-row"></div>
                                            <div class="flat-blue">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="4">
                                                    <label>logo识别</label>
                                                </div>
                                            </div>

                                            <div class="flat-yellow ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="5">
                                                    <label>红酒识别 </label>
                                                </div>
                                            </div>

                                            <div class="flat-purple ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="6">
                                                    <label>货币识别 </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group last">
                                    <label class="control-label col-sm-3">图像上传</label>
                                    <div class="col-sm-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload" style=" margin-left: 20px">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="">
                                            </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div>
                                                   <span class="btn btn-default btn-file">
                                                   <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择图像</span>
                                                   <span class="fileupload-exists"><i class="fa fa-undo"></i> 修改</span>
                                                   <input type="file" class="default" id="file">
                                                   </span>
                                                <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                        <br>
                                        <div class=" col-lg-10" style="margin-left:5px">
                                            <button class="btn btn-primary" type="button" id="btn">提交</button>
                                        </div>
                                    </div>
                                </div>
                                    <div class="form-group" style="margin-left:70px">
                                        <span class="label label-danger ">注意!</span>
                                             <span>
                                             支持的浏览器包括 Firefox, Chrome, Opera,Safari and IE10
                                             </span>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

                <div class="col-md-5">
                    <div class="panel">
                        <header class="panel-heading">
                            预测结果
                            <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                        </header>
                        <div class="panel-body">
                            <ul class="goal-progress">
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#">百度百科</a> - A
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="">20%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#">百度百科</a> - B
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="">20%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#">百度百科</a> - C
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="">20%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#">百度百科</a> - D
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="">20%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#">百度百科</a> - E
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="">20%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2023 &copy; AdminEx by teacher geng </a>
        </footer>
        <!--footer section end-->

    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script src="../static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/modernizr.min.js"></script>
<script src="../static/js/jquery.nicescroll.js"></script>

<!--ios7-->
<script src="../static/js/ios-switch/switchery.js" ></script>
<script src="../static/js/ios-switch/ios-init.js" ></script>

<!--icheck -->
<script src="../static/js/iCheck/jquery.icheck.js"></script>
<script src="../static/js/icheck-init.js"></script>
<!--multi-select-->
<script type="text/javascript" src="../static/js/jquery-multi-select/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="../static/js/jquery-multi-select/js/jquery.quicksearch.js"></script>
<script src="../static/js/multi-select-init.js"></script>
<!--spinner-->
<script type="text/javascript" src="../static/js/fuelux/js/spinner.min.js"></script>
<script src="../static/js/spinner-init.js"></script>
<!--file upload-->
<script type="text/javascript" src="../static/js/bootstrap-fileupload.min.js"></script>
<!--tags input-->
<script src="../static/js/jquery-tags-input/jquery.tagsinput.js"></script>
<script src="../static/js/tagsinput-init.js"></script>
<!--bootstrap input mask-->
<script type="text/javascript" src="../static/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>


<!--common scripts for all pages-->
<script src="../static/js/scripts.js"></script>

<script>
    $().ready(function(){
        $("#btn").click(function(){
            var formdata = new FormData()
            formdata.append("typeRadio",$('input:radio:checked').val());
            formdata.append("csrfmiddlewaretoken",$('[name="csrfmiddlewaretoken"]').val());
            formdata.append("image",$("#file")[0].files[0]);

            $.ajax({
                type:"post",
                url:"/recongnize/",
                data:formdata,
                processData:false,
                contentType:false,
                success:function(data,status){
                    alert("数据: \n" + data + "\n状态: " + status);
                }

            })
        })
    })


<!--$.post("/recongnize/",-->
<!--                {-->
<!--                    typeRadio:$('input:radio:checked').val(),-->
<!--                    csrfmiddlewaretoken:'{{csrf_token}}'-->
<!--                },-->
<!--                function(data,status){-->
<!--                     alert("数据: \n" + data + "\n状态: " + status);-->
<!--                });-->
</script>

</body>
</html>
